<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          style="width: 100%"
          row-key="id"
          lazy
          border
          height="500"
          :load="load"
          highlight-current-row
          :tree-props="{children: 'children' , hasChildren: 'hasChildren'}"
          @current-change="handleCurrentChange"
        >
          <el-table-column
            prop="name"
            label="菜单名称（勾选即可访问）"
          />
          <el-table-column
            width="55"
            label="操作"
          >
            <template slot-scope="{row}">
              <input :key="row.id" :checked="row.auth == '1' ? 'checked':''" type="checkbox" @change="selectChange(row,$event.target.checked)">
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <MenuButtonList :menuid="menuId" :roleid="roleId" :key="buttonListStatus"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { GetRoleMenuList, AddRoleMenuAuth, DeleteRoleMenuAuth } from '@/api/SystemManagerApi'
import MenuButtonList from '@/views/SystemSetting/SystemRole/components/MenuButtonList'
export default {
  components: { MenuButtonList },
  props: ['roleid'],
  data() {
    return {
      rules: {
        name: [{ required: true, message: 'type is required', trigger: 'change' }],
        icon: [{ required: true, message: 'type is required', trigger: 'change' }],
        url: [{ required: true, message: 'type is required', trigger: 'change' }]
      },
      title: '编辑菜单',
      fromTemp: {
        name: '',
        icon: '',
        url: '',
        id: null
      },
      dialogFormVisible: false,
      dialogButtonFormVisible: false,
      listLoading: false,
      menuId: null,
      roleId: null,
      list: [],
      buttonListStatus: ''
    }
  },
  watch: {
    roleid: {
      immediate: true, // 很重要！！！
      handler(val) {
        this.roleId = val
        this.getList()
        this.$nextTick(() => {
          this.$forceUpdate()
        })
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      GetRoleMenuList({ 'roleId': this.roleid }).then(response => {
        this.list = response.data
        console.info(JSON.stringify(this.list))
      })
    },
    load(tree, treeNode, resolve) {
      GetRoleMenuList({ 'menuId': tree.id, 'roleId': this.roleid }).then(response => {
        const data = response.data
        resolve(data)
      })
    },
    setFormData(row, isCreate) {
      if (isCreate) {
        if (row) {
          this.resetFormData(row.id)
        } else {
          this.resetFormData()
        }
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else {
        // eslint-disable-next-line no-undef
        this.fromTemp = Object.assign({}, row)
      }
      this.dialogFormVisible = true
    },
    handleCurrentChange(row) {
      this.menuId = row.id
      this.buttonListStatus = this.uuid()
    },
    selectChange(row, checked) {
      if (checked) {
        AddRoleMenuAuth({ 'menuId': row.id, 'roleId': this.roleid }).then(response => {
        })
      } else {
        DeleteRoleMenuAuth({ 'menuId': row.id, 'roleId': this.roleid }).then(response => {
        })
      }
    },
    uuid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
    }
  }
}
</script>
